<template>
  <div class="container">
    <header class="flex flex-js-c">
      <img class="logo" src="@/assets/images/logo.png" />
      <p class="time">{{ timeModule.text }}</p>
      <img title="登录" class="hero-ywy" src="@/assets/hero/ywy_rw.png" />
    </header>

    <div class="effect-sh">
      <canvas ref="effect"></canvas>
    </div>

    <div class="view_port">
      <div class="polling_message">Listening for dispatches</div>
      <div class="cylon_eye"></div>
    </div>

    <!-- <canvas style="background: url('@/assets/background/sh.jpg')" ref="shader"></canvas>-->

    <div class="base-content left-statistics-content">
      <div class="base">
        <div class="title">
          <span>T-0：雷达图</span>
        </div>
        <div class="content">
          <RadarEChart></RadarEChart>
        </div>
      </div>
      <div class="base">
        <div class="title">
          <span>T-1：Css</span>
        </div>
        <div class="content">
          <TowerLoading></TowerLoading>
        </div>
      </div>
      <div class="base">
        <div class="title">
          <span>T-1：播放器</span>
        </div>
        <div class="content music-view">
          <!--<canvas ref="music"></canvas>-->
        </div>
      </div>
      <div class="base">
        <div class="title">
          <span>T-1：播放器</span>
        </div>
        <div class="content music-view">
          <canvas ref="globe"></canvas>
        </div>
      </div>
    </div>

    <div class="base-content right-statistics-content">
      <div class="base">
        <div class="title">
          <span>T-1：播放器</span>
        </div>
        <div class="content music-view">
          <canvas ref="music"></canvas>
        </div>
      </div>
      <div class="base">
        <div class="title">
          <span>T-1：播放器</span>
        </div>
        <div class="content music-view">
          <!--<canvas ref="music"></canvas>-->
        </div>
      </div>
      <div class="base">
        <div class="title"><span>P-3</span></div>
        <canvas ref="demo"></canvas>
      </div>
      <div class="base">
        <div class="title"><span>P-3</span></div>
        <AButton>
          <input ref="canvas"
                 type="file"
                 class="file-input"
                 @change="handlePlay" />
        </AButton>
        <KButton></KButton>
      </div>
    </div>



    <!---->
    <!--<div class="top_left">
    <TowerLoading></TowerLoading>
    <FloatTextLoading></FloatTextLoading>
  </div>
  <h1 class="top_title">你好</h1>
  <div class="top_right">{{ timeModule.text }}</div>

  <div class="stack_up-container">-->
    <!--      <img src="@/assets/largeScreen/EPm3X74Wvr.png">-->
    <!--      <img src="@/assets/largeScreen/YlnpKnVeqX.png">-->
    <!--      <img src="@/assets/largeScreen/5efa80d29bb2f1593475282355.png">-->
    <!--</div>-->
  </div>
</template>

<script lang="ts">
  import { defineComponent, onMounted, reactive, toRefs } from "vue";
  import { Shader } from '@/common/three/shader';
  import Line from '@/components/Warm/ECharts/line.vue';
  import KButton from '@/components/Warm/Form/Button/KButton.vue';
  import AButton from '@/components/Warm/Form/Button/AButton.vue';
  import TowerLoading from '@/components/Warm/Loading/towerLoading.vue';
  import FloatTextLoading from '@/components/Warm/Loading/floatTextLoading.vue';
  import Card from '@/components/Warm/Card/index.vue';
  import AFolded from '@/components/Warm/Folded/AFolded.vue';
  import RadarEChart from '@/components/Warm/ECharts/radar.vue';
  import { getApp } from "@/common/hooks";
  import { Pass } from '@/common/three/pass';
  import { Music } from "@/common/three/music";
  import { Globe } from "@/common/three/globe";

  export default defineComponent({
    name: "three",
    components: {
      Line,
      AButton,
      TowerLoading,
      FloatTextLoading,
      AFolded,
      Card,
      KButton,
      RadarEChart
    } as any,
    setup() {
      const { System } = getApp();

      let music;

      const refsModule = reactive({
        canvas: null as null | HTMLCanvasElement,
        effect: null as null | HTMLCanvasElement,
        shader: null as null | HTMLCanvasElement,
        music: null as null | HTMLCanvasElement,
        globe: null as null | HTMLCanvasElement
      });

      const timeModule = reactive({
        text: '',
        timer: null as any,
        init() {
          this.timer && clearInterval(this.timer);
          this.timer = setInterval(() => {
            this.text = System.Moment().format('LLLL');
          }, 1000);
        }
      });

      async function main() {
        /*const engine = await WebGLEngine.create({ canvas: refsModule.demo! });
        engine.canvas.resizeByClientSize();

        const scene = engine.sceneManager.activeScene;
        const rootEntity = scene.createRootEntity();

        const cameraEntity = rootEntity.createChild("Camera");
        cameraEntity.transform.setPosition(0, 0, 5);
        cameraEntity.addComponent(Camera);
        cameraEntity.addComponent(OrbitControl);

        engine.resourceManager
        .load<Entity>({
          urls: [
            "https://gw.alipayobjects.com/os/bmw-prod/bbf83713-c23f-4981-8b8d-241d905fc3bf.json",
            "https://gw.alipayobjects.com/os/bmw-prod/d9b42223-b1ae-4f51-b489-75b2f36a2b2d.atlas",
          ],
          type: "lottie",
        })
        .then((lottieEntity) => {
          rootEntity.addChild(lottieEntity);
          const lottie = lottieEntity.getComponent(LottieAnimation);
          lottie!.isLooping = true;
          lottieEntity.transform.setScale(0.5, 0.5, 0.5);
          lottie!.play();
        });
        engine.run();*/
      }

      const handlePlay = () => music!.playAudio(refsModule.canvas!);

      onMounted(() => {
        new Pass(refsModule.effect!);

        music = new Music(refsModule.music!, {
          useCanvasHeightAndWidth: true,
          isOpenGUI: false
        });

        new Globe(refsModule.globe!, {
          useCanvasHeightAndWidth: true,
          isOpenGUI: false
        });

        new Shader(refsModule.shader!, {
          useCanvasHeightAndWidth: false,
          isOpenGUI: false
        });
        
       /* new Shader(refsModule.map!, {
          useCanvasHeightAndWidth: false
        });*/
        timeModule.init();
        //main();
      });

      return {
        ...toRefs(refsModule),
        timeModule,
        handlePlay,
      }
    }
  });
</script>

<style scoped lang="scss">
  $text-color-main: #FEF62F;

  .container {
    overflow: hidden;
    position: relative;
    min-width: 1920Px;
    height: 100vh;

    .polling_message {
      color: white;
      float: left;
      margin-right: 2%;
    }

    .view_port {
      background-color: black;
      height: 25Px;
      width: 100%;
      overflow: hidden;
    }

    .cylon_eye {
      background-color: red;
      background-image: linear-gradient( to right, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.9) 75% );
      color: white;
      height: 100%;
      width: 20%;
      animation: 10s linear 0s infinite alternate move_eye;
    }

    @-webkit-keyframes move_eye {
      from {
        margin-left: -20%;
      }

      to {
        margin-left: 100%;
      }
    }

    @keyframes move_eye {
      from {
        margin-left: -20%;
      }

      to {
        margin-left: 100%;
      }
    }

    header {
      height: 80Px;
      width: 100%;
      position: absolute;
      z-index: 99;

      &::before {
        position: absolute;
        content: '';
        height: 100%;
        width: 100%;
        clip-path: polygon(2% 51%, 0 50%, 0 0, 100% 0, 100% 50%, 98% 50%, 97% 70%, 65% 70%, 64% 100%, 36% 100%, 35% 70%, 3% 70%);
        background-color: $text-color-main;
        //clip-path: polygon( 0Px 25Px, 26Px 0Px, calc(60% - 25Px) 0Px, 60% 25Px, 100% 25Px, 100% calc(100% - 10Px), calc(100% - 15Px) calc(100% - 10Px), calc(80% - 10Px) calc(100% - 10Px), calc(80% - 15Px) 100%, 80Px calc(100% - 0Px), 65Px calc(100% - 15Px), 0% calc(100% - 15Px) );
      }

      .hero-ywy {
        position: absolute;
        top: -10Px;
        width: 80Px;
        right: 40Px;
        cursor: pointer;
      }

      .logo {
        position: absolute;
        height: 120Px;
      }

      .time {
        position: absolute;
        right: 20Px;
        font-size: 18Px;
        top: 25%;
        transform: translateY(-50%);
        color: #fff;
        text-shadow:
        /* 扩散白光 */
        0 0 7Px #fff, 0 0 10Px #fff, 0 0 21Px #fff,
        /* 扩散绿光 */
        0 0 42Px red, 0 0 82Px #0fa, 0 0 92Px red, 0 0 102Px red, 0 0 151Px red;
      }
    }

    .effect-sh {
      height: 50%;
      width: 100%;
      overflow: hidden;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        left: 0;
        height: 100%;
        min-width: 1920Px;
        background: url("@/assets/background/sh.jpg") no-repeat;
        background-position: center;
        background-size: cover;
        z-index: -1;
      }

      canvas {
        opacity: 0.4;
        //opacity: 0;
        /*animation-name: hide;
        animation-duration: .2s;
        animation-timing-function: initial;
        animation-iteration-count: 1;
        animation-fill-mode: forwards;
        animation-delay: 2s;*/
      }
    }

    .canvas-container {
      display: block;
      margin: 0 auto;
    }

    .base-content {
      position: absolute;
      top: 120Px;

      .music-view {
        canvas {
          height: 100%;
          width: 100%;
        }
      }

      .base {
        height: 150Px;
        width: 300Px;
        position: relative;
        padding: 30Px 5Px 15Px 5Px;
        box-sizing: border-box;

        &::before {
          position: absolute;
          content: '';
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background-color: $text-color-main;
          clip-path: polygon(0Px 25Px, 26Px 0Px, calc(60% - 25Px) 0Px, 60% 25Px, 100% 25Px, 100% calc(100% - 10Px), calc(100% - 10Px) calc(100% - 10Px), calc(80% - 10Px) calc(100% - 10Px), calc(80% - 20Px) 100%, 80Px calc(100% - 0Px), 65Px calc(100% - 10Px), 0% calc(100% - 10Px));
        }

        .title {
          position: absolute;
          height: 25Px;
          width: 170Px;
          top: 3Px;
          display: flex;
          justify-content: center;
          align-items: center;

          span {
            color: $text-color-main;
            font-weight: bold;
            padding: 1Px 5Px;
            border-radius: 5Px;
            background-color: #000000;
          }
        }

        .content {
          position: relative;
          height: 100%;
          width: 100%;
          background: #000000;
        }

        &:nth-child(n + 2) {
          margin-top: 60Px;
        }

        &:nth-child(1) {
          background-position: -67Px -67Px;
          background-size: 1042Px 1020Px;
          background-repeat: no-repeat;
        }

        &:nth-child(2) {
          background-position: -67Px -67Px;
          background-size: 1042Px 1020Px;
          background-repeat: no-repeat;
        }

        &:nth-child(3) {
          background-position: -67Px -67Px;
          background-size: 1042Px 1020Px;
          background-repeat: no-repeat;
        }
      }
    }

    .top_title {
      position: absolute;
      left: 50%;
      top: 46Px;
      letter-spacing: 10Px;
      transform: translateX(-50%);
      color: #FFFFFF;
      z-index: 2;
      margin: 0;
    }

    .top_left {
      position: absolute;
      left: 122Px;
      top: 70Px;
    }

    .top_right {
      position: absolute;
      right: 122Px;
      top: 70Px;
      letter-spacing: 10Px;
      color: #FFFFFF;
      width: 200Px;
    }

    .left-statistics-content {
      left: 80Px;
    }

    .right-statistics-content {
      right: 80Px;
    }
  }
</style>